import React, { Suspense, useEffect, useState } from "react";
import { useLocation, useHistory, withRouter, Switch } from "react-router-dom";
import { renderRoutes } from "react-router-config";
// import Loading from './pages/common/Loading/Loading'
import routes from "./routes";
// import {TabBar, TabItem} from './components/app-tab-bar'
import { TabBar, Loading } from 'antd-mobile'
import {
  AppOutline,
  TruckOutline,
  UnorderedListOutline,
  UserOutline,
  TagOutline
} from 'antd-mobile-icons'

const tabs = [
  {
    key: '/home',
    title: '首页',
    icon: <AppOutline />,
  },
  {
    key: '/topic',
    title: '专题',
    icon: <TagOutline />
    ,
  },
  {
    key: '/category',
    title: '分类',
    icon: <UnorderedListOutline />,
  },
  {
    key: '/cart',
    title: '购物车',
    icon: <TruckOutline />,
  },
  {
    key: '/mine',
    title: '个人中心',
    icon: <UserOutline />,
  },
]
function App() {
  const history = useHistory()
  const setRouteActive = (value) => {
    history.push({
      pathname: value,
    })
  }
  const location = useLocation()
  const { pathname } = location

  const [showTab, setShowTab] = useState(true)
  // 监听
  useEffect(() => {
    if (location?.state?.showTab) {
      setShowTab(false)
    } else {
      setShowTab(true)
    }
  }, [location])
  return (
    <>
      <Suspense fallback={<Loading color='primary' />}>
        {/* 根页面 */}
        <Switch>
          {renderRoutes(routes)}
        </Switch>
      </Suspense>
      {showTab && <TabBar defaultActiveKey={pathname} onChange={e => setRouteActive(e)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>}
    </>

  );
}

export default withRouter(App)